<template>
	<view class="content">
		<!-- 给typeBox添加ref用于获取高度 -->
		<view class="typeBox" ref="typeBox">
			<view class="typeItem" v-for="(item,index) in type" :key="index" @click="changeType(index,item.id)">
				<image :src="item.image" class="cover"></image>
				<text class="typeName">{{item.name}}</text>
				<view class="triangle" v-if="typeIndex==index">
				</view>
			</view>
		</view>
		<view class="typeLine">
		</view>
		<!-- 动态绑定list高度 -->
		<scroll-view class="list" scroll-y="true" :style="{ height: listHeight + 'px' }" @scrolltolower="getMore">
			<view class="listItem" v-for="(item,index) in association" :key="index"
				@click="$navto.navto('/packageB/association_info/association_info',{id:item.id})">
				<image :src="item.head" class="avatar"></image>
				<text class="name">{{item.name}}</text>
				<text class="info"
					v-if="item.activity_time">成员{{item.user_num}}人&ensp;&ensp;/&ensp;&ensp;近期活动：{{$timestampToTime(item.activity_time)}}</text>
				<text class="info" v-else>成员{{item.user_num}}人&ensp;&ensp;/&ensp;&ensp;新社群</text>
				<view class="join" v-if="item.community_status==0" @click.stop="join(item.id)">
					申请加入
				</view>
				<view class="exit" v-else @click.stop="exit(item.id,index)">
					退出
				</view>
				<view class="line" v-if="index!=association.length-1">
				</view>
			</view>
		</scroll-view>
		<!-- 入群规则 -->
		<view class="ruleBox" v-if="isRule">
			<view class="ruleBoxInner">
				<view class="ruleTopBox">
					<image :src="baseurl+'associationAdd/1.png'" class="step"></image>
					<image :src="baseurl+'associationAdd/3.png'" class="close" @click="isRule=!isRule"></image>
				</view>
				<text class="ruleTitle">《入群要求及协议》</text>
				<view class="ruleLine"></view>
				<view class="mpHtml">
					<mp-html :content="data.agreement" />
				</view>
				<view class="agreeBox" @click="agree">
					<image :src="baseurl+agreeUrl" class="agree"></image>
					<text class="agreeText1">我已阅读并同意</text>
					<text class="agreeText2">《入群要求及协议》</text>
				</view>
				<view class="next" @click="next">
					下一步
				</view>
			</view>
		</view>
		<!-- 申请入群 -->
		<view class="applyBox" v-if="isApply">
			<view class="applyBoxInner">
				<view class="applyTopBox">
					<image :src="baseurl+'associationAdd/2.png'" class="step"></image>
					<image :src="baseurl+'associationAdd/3.png'" class="close" @click="isApply=!isApply"></image>
				</view>
				<text class="applyLabel">
					您的姓名：
				</text>
				<input type="text" class="applyInput" placeholder="请填写您的姓名" v-model="name" />
				<text class="applyLabel">
					电话号码：
				</text>
				<input type="text" class="applyInput" placeholder="请填写您的电话号码" v-model="tel" maxlength="11" />
				<text class="applyLabel">联系主理人：</text>
				<text class="applyLabel" style="margin-top: 60rpx;"
					@click="$phone(data.principal_mobile)">{{data.principal_mobile || ''}}</text>
				<view class="apply" @click="apply()">
					申请入群
				</view>
			</view>
		</view>
		<!-- 申请结果 -->
		<view class="resultBox" v-if="isResult">
			<view class="resultInner">
				<view class="resultTopBox">
					<text class="resultTitle">审核结果</text>
					<image :src="baseurl+'associationAdd/3.png'" class="close" @click="isResult=!isResult"></image>
				</view>
				<view class="successBox" v-if="isFail">
					<image :src="baseurl+'associationAdd/6.png'" class="successIcon"></image>
					<text class="successTitle">申请失败</text>
					<text class="successDesc">很遗憾申请失败，再次申请试试！</text>
					<view class="successBtn" @click="again">
						再次申请
					</view>
				</view>
				<view class="successBox" v-if="isSuccess">
					<image :src="baseurl+'associationAdd/7.png'" class="successIcon"></image>
					<text class="successTitle">审核中</text>
					<text class="successDesc">申请审核中，请耐心等待</text>
					<view class="successBtn" @click="$navto.navto('/packageB/my_association_join/my_association_join')">
						查看审核
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				baseurl: this.$baseurl,
				association: [],
				page: 1,
				typeIndex: 0,
				listHeight: 0,
				pageHeight: 0,
				typeBoxHeight: 0,
				isRule: false,
				isApply: false,
				isAgree: false,
				agreeUrl: 'associationAdd/4.png',
				name: '',
				tel: '',
				isResult: false,
				isSuccess: false,
				isFail: false,
				applyId: '', //要申请的社群id
				data: '',
				type: '',
				category_id: '',
				haveMore: true,
			}
		},
		onLoad(options) {
			// 查询社群类别
			this.$request.get(`CommunityCategory/community_category_list`).then(res => {
				console.log(res.data.data)
				this.type = res.data.data;
				this.category_id = this.type[0].id;
				this.getData();
			})
			this.getPageHeight();
		},
		onReady() {
			this.getTypeBoxHeight();
		},
		methods: {
			again() {
				this.isResult = false;
				this.isSuccess = false;
				this.isFail = false;
			},
			// 申请加入社群
			join(id) {
				this.isAgree = false;
				this.agreeUrl = 'associationAdd/4.png'
				this.isRule = !this.isRule;
				this.applyId = id;
				this.$request.get(`community/communityDetail?id=${this.applyId}`).then(res => {
					this.data = res.data.data;
				})
			},
			apply() {
				if (this.name == '') {
					return this.$toast({
						title: '请填写您的姓名'
					})
				}
				if (this.tel == '') {
					this.$u.toast('请填写您的电话')
					return;
				}
				if (!(/^1[3|4|5|6|8|7|9][0-9]\d{8}$/.test(this.tel))) {
					this.$u.toast('电话号码格式不正确')
					return;
				}
				this.$request.post(`CommunityUser/community_user`, {
					name: this.name,
					mobile: this.tel,
					community_id: this.applyId
				}).then(res => {
					console.log(res);
					if (res.data.code == 1) {
						this.isSuccess = true;
					} else {
						this.isFail = true;
					}
					this.isRule = false;
					this.isApply = false;
					this.isAgree = false;
					agreeUrl: 'associationAdd/4.png',
						this.isResult = true;
				})
			},
			agree() {
				if (this.isAgree == false) {
					this.isAgree = true;
					this.agreeUrl = 'associationAdd/5.png'
				} else {
					this.isAgree = false;
					this.agreeUrl = 'associationAdd/4.png'
				}
			},
			next() {
				console.log(this.isAgree)
				if (this.isAgree == false) {
					return this.$toast({
						title: '请阅读并同意入群要求及协议'
					})
				}
				this.isRule = false;
				this.isApply = true;
			},
			getMore() {
				if (this.haveMore) {
					this.page++;
					this.getData();
				} else {
					this.$toast({
						title: '暂无更多数据'
					})
				}
			},
			changeType(index, id) {
				console.log(id);
				this.page = 1;
				this.typeIndex = index;
				this.category_id = id;
				this.association=[];
				this.getData()
			},
			getPageHeight() {
				const systemInfo = uni.getSystemInfoSync();
				this.pageHeight = systemInfo.windowHeight; // 窗口高度即页面可用高度
				this.calcListHeight(); // 触发高度计算
			},
			getTypeBoxHeight() {
				const query = uni.createSelectorQuery().in(this);
				query.select('.typeBox').boundingClientRect(data => {
					if (data) {
						this.typeBoxHeight = data.height; // 保存typeBox高度
						this.calcListHeight(); // 触发高度计算
					}
				}).exec();
			},
			calcListHeight() {
				if (this.pageHeight && this.typeBoxHeight) {
					const systemInfo = uni.getSystemInfoSync();
					const rpxToPx = 2 * (systemInfo.windowWidth / 750);
					this.listHeight = this.pageHeight - this.typeBoxHeight - rpxToPx - 20;
				}
			},
			// 获取社群列表数据
			getData() {
				this.$request.get(`community/communityLists?page=${this.page}&category_id=${this.category_id}`).then(
				res => {
					this.association.push(...res.data.data);
					if (res.data.data.length == 0) {
						this.haveMore = false;
					}
				})
			},
			// 退出社群
			exit(id, index) {
				uni.showModal({
					title: '提示',
					content: '是否确认退出',
					success: (res) => {
						if (res.confirm) {
							this.$request.post(`CommunityUser/community_user`, {
								community_id: id
							}).then(res => {
								console.log(res);
								this.$u.toast('退出成功');
								this.association.splice(index, 1);
							})
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});
			}
		}
	}
</script>

<style lang="scss">
	.resultBox {
		position: absolute;
		width: 100%;
		height: 100%;
		top: 0;
		left: 0;
		background-color: rgba(0, 0, 0, 0.8);
		z-index: 10;

		.resultInner {
			position: fixed;
			bottom: 0;
			width: 100%;
			height: 1000rpx;
			max-height: 100%;
			background-color: #EDF6FA;
			border-radius: 50rpx 50rpx 0 0;

			.successBox {
				margin-top: 160rpx;
				display: flex;
				flex-direction: column;
				align-items: center;

				.successBtn {
					width: 520rpx;
					height: 94rpx;
					background-color: #4E97AD;
					border-radius: 47rpx;
					margin-top: 160rpx;
					// margin-bottom: 130rpx;
					font-size: 28rpx;
					font-weight: 700;
					color: #fff;
					display: flex;
					align-items: center;
					justify-content: center;
				}

				.successDesc {
					font-size: 24rpx;
					font-weight: 500;
					color: #919191;
					margin-top: 35rpx;
				}

				.successTitle {
					font-size: 36rpx;
					font-weight: 700;
					margin-top: 85rpx;
				}

				.successIcon {
					width: 145rpx;
					height: 145rpx;
				}
			}

			.resultTopBox {
				position: relative;
				width: 100%;
				display: flex;
				justify-content: space-between;
				border-bottom: 1rpx solid #c8c8c8;
				padding-top: 40rpx;
				padding-bottom: 40rpx;
				box-sizing: border-box;
				margin-bottom: 75rpx;

				.resultTitle {
					width: 100%;
					text-align: center;
					font-size: 32rpx;
					font-weight: 700;
				}

				.close {
					position: absolute;
					width: 40rpx;
					height: 40rpx;
					right: 40rpx;
				}
			}
		}
	}

	.applyBox {
		position: absolute;
		width: 100%;
		height: 100%;
		top: 0;
		left: 0;
		background-color: rgba(0, 0, 0, 0.8);
		z-index: 10;

		.applyBoxInner {
			position: fixed;
			bottom: 0;
			width: 100%;
			height: 1000rpx;
			max-height: 100%;
			background-color: #EDF6FA;
			border-radius: 50rpx 50rpx 0 0;

			.apply {
				width: 520rpx;
				height: 94rpx;
				background-color: #4E97AD;
				border-radius: 47rpx;
				margin-top: 95rpx;
				// margin-bottom: 130rpx;
				margin-left: 115rpx;
				font-size: 28rpx;
				font-weight: 700;
				color: #fff;
				display: flex;
				align-items: center;
				justify-content: center;
			}

			.applyInput {
				width: 580rpx;
				height: 80rpx;
				border-radius: 10rpx;
				background-color: #fff;
				margin-left: 85rpx;
				font-size: 28rpx;
				padding-left: 50rpx;
				box-sizing: border-box;
				margin-top: 25rpx;
				margin-bottom: 40rpx;
			}

			.applyLabel {
				font-size: 28rpx;
				font-weight: 500;
				margin-left: 85rpx;
				display: block;
			}

			.applyTopBox {
				width: 100%;
				display: flex;
				justify-content: space-between;
				border-bottom: 1rpx solid #c8c8c8;
				padding: 40rpx;
				box-sizing: border-box;
				margin-bottom: 75rpx;

				.step {
					width: 550rpx;
					height: 40rpx;
				}

				.close {
					width: 40rpx;
					height: 40rpx;
				}
			}
		}
	}

	.ruleBox {
		position: absolute;
		width: 100%;
		height: 100%;
		top: 0;
		left: 0;
		background-color: rgba(0, 0, 0, 0.8);
		z-index: 10;

		.ruleBoxInner {
			position: fixed;
			bottom: 0;
			width: 100%;
			max-height: 100%;
			margin-top: 360rpx;
			background-color: #fff;
			border-radius: 50rpx 50rpx 0 0;
			overflow: scroll;
			padding-bottom: 120rpx;

			.next {
				width: 520rpx;
				height: 94rpx;
				background-color: #4E97AD;
				border-radius: 47rpx;
				margin-top: 95rpx;
				// margin-bottom: 130rpx;
				margin-left: 115rpx;
				font-size: 28rpx;
				font-weight: 700;
				color: #fff;
				display: flex;
				align-items: center;
				justify-content: center;
			}

			.agreeBox {
				width: 670rpx;
				display: flex;
				align-items: center;
				margin-left: 40rpx;

				.agreeText2 {
					font-size: 28rpx;
					font-weight: 500;
					color: rgba(78, 151, 173, 1);
				}

				.agreeText1 {
					font-size: 28rpx;
					font-weight: 500;
				}

				.agree {
					width: 35rpx;
					height: 35rpx;
					margin-right: 30rpx;
				}
			}

			.mpHtml {
				width: 670rpx;
				max-height: 500rpx;
				overflow-y: scroll;
				margin-top: 55rpx;
				margin-bottom: 55rpx;
				margin-left: 40rpx;
			}

			.ruleLine {
				width: 670rpx;
				height: 1rpx;
				background-color: #c8c8c8;
				margin: 0 auto;
			}

			.ruleTitle {
				width: 100%;
				text-align: center;
				font-size: 32rpx;
				font-weight: 700;
				margin-top: 55rpx;
				margin-bottom: 55rpx;
				display: block;
			}

			.ruleTopBox {
				width: 100%;
				display: flex;
				justify-content: space-between;
				border-bottom: 1rpx solid #c8c8c8;
				padding: 40rpx;
				box-sizing: border-box;

				.step {
					width: 550rpx;
					height: 40rpx;
				}

				.close {
					width: 40rpx;
					height: 40rpx;
				}
			}
		}
	}

	.typeLine {
		height: 2rpx;
		background-color: #000;
		width: 670rpx;
		margin-left: 40rpx;
	}

	.typeBox {
		width: 710rpx;
		height: 260rpx;
		padding-top: 30rpx;
		margin-left: 40rpx;
		box-sizing: border-box;
		display: flex;
		overflow-x: scroll;
		position: relative;

		.typeItem {
			position: relative;
			width: 210rpx;
			margin-right: 20rpx;
			flex-shrink: 0;

			.triangle {
				position: absolute;
				width: 0;
				height: 0;
				border-left: 6px solid transparent;
				border-right: 6px solid transparent;
				border-bottom: 10px solid #000;
				bottom: 0;
				left: 50%;
				transform: translateX(-50%);
			}

			.typeName {
				position: absolute;
				width: 100%;
				top: 100rpx;
				text-align: center;
				color: #fff;
				font-size: 28rpx;
				font-weight: 700;
			}

			.cover {
				position: absolute;
				left: 0;
				top: 0;
				width: 210rpx;
				height: 160rpx;
			}
		}
	}

	.list {
		width: 670rpx;
		margin-left: 40rpx;
		overflow-y: scroll;
		padding-top: 20rpx;
	}

	.list .listItem {
		width: 100%;
		height: 160rpx;
		position: relative;
		display: flex;
		justify-content: space-between;
		margin-top: 70rpx;

		.line {
			position: absolute;
			right: 0;
			bottom: 0;
			width: 530rpx;
			height: 2rpx;
			background-color: #d8d8d8;
		}

		.exit {
			position: absolute;
			top: 0;
			right: 0;
			width: 136rpx;
			height: 60rpx;
			border-radius: 30rpx;
			text-align: center;
			line-height: 60rpx;
			font-size: 22rpx;
			font-weight: 500;
			background-color: #D95945;
			color: #fff;
		}

		.join {
			position: absolute;
			top: 0;
			right: 0;
			width: 136rpx;
			height: 60rpx;
			border-radius: 30rpx;
			text-align: center;
			line-height: 60rpx;
			font-size: 22rpx;
			font-weight: 500;
			background-color: #4E97AD;
			color: #fff;
		}

		.info {
			position: absolute;
			font-size: 24rpx;
			font-weight: 500;
			top: 65rpx;
			left: 145rpx;
			color: #919191;
		}

		.name {
			position: absolute;
			font-size: 32rpx;
			font-weight: 700;
			top: 10rpx;
			left: 145rpx;
		}

		.avatar {
			width: 100rpx;
			height: 100rpx;
			border-radius: 50%;
		}
	}

	.content {
		width: 100%;
		height: 100%;
		background-color: #fff;
		background: url('https://miantou.guguan.net/img/common/bg.png');
		background-size: 100% auto;
	}

	page {
		width: 100%;
		height: 100%;
		background-color: #fff;
	}
</style>